<?php echo $this->doctype('XHTML1_STRICT'); ?>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<?php 
$this->headMeta()->appendHttpEquiv('Content-Type', 'text/html; charset=UTF-8')
                 ->appendHttpEquiv('Content-Language', 'en-US');             
                 
echo $this->headMeta() . "\n";
$this->headTitle('Announcement Slide');
echo "\n";    
echo $this->headTitle() . "\n\n";
?>

<style>

html, body {
    
    height: 100%;
    margin: 0;
    padding: 0;
	background-color: <?php echo ($this->bgColor == '') ? '#FFFFFF' : '#' . $this->bgColor; ?>;
	color: <?php echo ($this->textColor == '') ? '#000000' : '#' . $this->textColor;?>;
}

body {
    overflow: hidden;
}

div#slide {
    width: <?php echo $this->screenWidth; ?>px;
    height: <?php echo $this->screenHeight; ?>px;
    background-color: <?php echo ($this->bgColor == '') ? '#FFFFFF' : '#' . $this->bgColor; ?>;
    
	<?php if ($this->bgImageURL != '') : ?>
        background-image: url(<?php echo $this->bgImageURL; ?>);
        background-position: <?php echo $this->camelCaseToSeparator($this->bgAlignment); ?>;
        background-repeat: <?php echo $this->bgRepeat; ?>;
    <?php endif; ?>
	margin:0;
}

#wrapper{
    visibility:hidden;
	<?php if ($this->border != 'none') : ?>
        border: solid 1px #<?php echo $this->borderClr; ?>;
    <?php endif; ?>

    <?php if ($this->border == 'rounded') : ?>
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    <?php endif; ?>

	width: <?php echo $this->screenWidth - 180; ?>px;
	height: <?php echo $this->screenHeight - 180; ?>px; 

    margin-left: 90px;
    margin-top: 90px;
    padding: 0;
    font-family: sans-serif;
    font-size: 3.0em;
    /*position:absolute;
    padding: 0px;
    top: 50%;
    left: 50%;
    width: 30em;
    height: 18em;
    margin-top: -9em;
    margin-left: -15em;*/
}
	
#image {  
    float: <?php echo ($this->imgPos == 'left') ? 'left' : 'right'; ?>;
    text-align: center;
    width: 30%;
    height: 100%;
    <?php if ($this->midBorder) : ?> 
        border-<?php echo $this->contentPos; ?>: solid 1px #<?php echo $this->borderClr; ?>;
    <?php endif; ?>
}     
    
#contentWrapper {
   /*border: 1px solid #0F0;*/
   <?php if ($this->imageURL != '') : ?>
       width: 65%;
   <?php else : ?>
       width: 100%;
   <?php endif; ?>
   height: 100%;
   overflow: hidden;
   float: <?php echo ($this->imgPos == 'left') ? 'right' : 'left'; ?>;
}

#content {
    margin: 10px 20px 10px 20px;
}
    
#content ul, #content ol {
    list-style-position: inside;
}
     
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script type="text/javascript">

var screenHeight = <?php echo $this->screenHeight; ?>;
var screenWidth  = <?php echo $this->screenWidth; ?>;

function resizeImage(difference) {
    
	if (ratio > 1) { // the width is larger than height
		imageWidth = imageWidth - difference;
		imageHeight = imageWidth/ratio;
	} else if (ratio < 1) { // same as above except inversed
		imageHeight = imageHeight - difference;
		imageWidth = imageHeight*ratio;
	} else { // both are the same size, they are both the largest size
		imageWidth = imageWidth - difference;
		imageHeight = imageWidth;
	}

	image.css({
        width: imageWidth,
        height: imageHeight
    });
}

function init() {

	    image = $('#image>img');
	    var wrapper = $('#wrapper');
	    var wrapperOffset = $('#wrapper').offset();

	    imageHeight = image.outerHeight(true);
	    imageWidth = image.outerWidth(true);

	    ratio = imageWidth/imageHeight;
	    
	    if(imageHeight > wrapper.height()) {
	        resizeImage(imageHeight - wrapper.height());
	    }

	    imageWidth = image.outerWidth(true);

	    if(imageWidth > wrapper.width()/2) {
	        resizeImage(imageWidth - wrapper.width()/2 + 75);
	    }

	    var imagePadding = (wrapper.height() - $('#image>img').height()) / 2;

	    $('#image>img').css({
            'padding-top': imagePadding,
            'padding-bottom':imagePadding
        });
	    
	    wrapper.css('visibility','visible');

	    setFontFamily('<?php echo $this->fontFamily;?>');
	    
}

function setFontFamily(fontFamily) {
	
	var defaultFonts = ['Arial', 'Courier', 'Helvetica', 'Verdana'];
	                    
	if ($.inArray(fontFamily, defaultFonts) == -1) {

		var link = $('<link>');
		link.attr({
		        type: 'text/css',
		        rel: 'stylesheet',
		        href: 'http://fonts.googleapis.com/css?family=' + fontFamily
		});
		
		$('head').append(link);
	}
	
	$('#content').css('font-family', fontFamily);
}

function onShow() {
	// do nothing
}

function onHide(msg) {
	// do nothing
}    
</script>


</head>

<body>
    <div id="slide">
    	<div id="wrapper" style="clear: both;">
                <?php if ($this->imageURL != '') : ?>
                    <div id="image">
                        <img src="<?php echo $this->imageURL;?>" />
                    </div>
                <?php endif; ?>
        	<div id="contentWrapper">
                    <div id="content">
                        <?php echo $this->article; ?>
                    </div>
        	</div>
    	    <div style="clear:both;"></div>
    	</div>
    </div>
</body>
</html>